<template>
<!-- 轮播 -->
    
    <div class="main-root">
        <div>
            <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
            <van-popup @closed="asd" v-model="show" duration="0.5" lock-scroll round closeable>
                    <div class="poper" style="width:300px;height:400px;border-radius:.15rem;overflow:hidden">
                        <h2 style="color:white;font-size:24px;text-align:center;margin-top:.15rem">新人专享福利</h2>
                        <p style="text-align:center;color:white;font-size:.16rem;margin-bottom:.23rem">尽享购物乐趣</p>

                        <div style=" border-radius:.1rem;display:flex;width:2.6rem;height:.75rem;background-color:white;margin-left:.2rem;color:rgba(255, 98, 98, 1);">
                            <div style="width:42%;font-size:.16rem;line-height:.75rem;font-weight:700;margin-left:.15rem">
                                ￥ <span style="font-size:.48rem">10</span> 
                            </div>
                            <div style="width:58%;">
                                <p style="margin-top:.15rem;color:white;background-color:rgba(255, 98, 98, 1);display:inline-block;width:.9rem;border-radius:.1rem;padding:.02rem">无门槛优惠券</p>
                                <div style="color:#999">美妆专区可用</div>
                            </div>
                        </div>

                        <ul style="color:white;text-align:center;padding 15px;margin-top:.15rem;display:flex;justify-content:space-around">
                            <li>
                                <div>
                                    <img width="80px" height="80px" src="../../../../public/ykf-img/tankuang.png" alt="">
                                </div>
                                <p style="margin-top:.1rem">仅需￥99.0</p>
                            </li>
                             <li>
  <div>
                                    <img width="80px" height="80px" src="../../../../public/ykf-img/tankuang.png" alt="">
                                </div>
                                <p style="margin-top:.1rem">仅需￥99.0</p>
                            </li>
                             <li>
                           <div>
                                    <img width="80px" height="80px" src="../../../../public/ykf-img/tankuang.png" alt="">
                                </div>
                                <p style="margin-top:.1rem">仅需￥99.0</p>
                            </li>
                        </ul>

                        <div style="margin-top:.16rem;text-align:center;height:.4rem">
                            <div style="color:white;background-color:rgba(255, 199, 28, 1);line-height:.4rem;font-size:.18rem;display:inline-block;width:2.63rem;border-radius:.15rem">
                                立即使用
                            </div>
                        </div>

                        <p style="text-align:center;color:white;margin-top:.1rem">领取后4天内有效</p>
                    </div>
                
                </van-popup>
        </div>
           <div id="home-crousel">
                <Swiper></Swiper>
            </div>
         <div class="main-crousel-nav">
             <!-- 选项 -->
        <ul>
            <li @click="viphandle('vipcenter')">
                <div class="crousel-nav-up">
                    <img src="../../../../public/ykf-img/h1.png" alt="">
                </div>
                <div class="crousel-nav-text">
                    <span>会员中心</span>
                </div>
            </li>
              <li @click="viphandle('special')">
                <div class="crousel-nav-up">
                    <img src="../../../../public/ykf-img/h2.png" alt="">
                </div>
                <div class="crousel-nav-text">
                    <span>种草特辑</span>
                </div>
            </li>
              <li @click="viphandle('jingxuan')">
                <div class="crousel-nav-up">
                    <img src="../../../../public/ykf-img/后.png" alt="">
                </div>
                <div class="crousel-nav-text">
                    <span>精选品牌</span>
                </div>
            </li>
              <li @click="viphandle('lingquan')">
                <div class="crousel-nav-up">
                    <img src="../../../../public/ykf-img/h4.png" alt="">
                </div>
                <div class="crousel-nav-text">
                    <span>领券中心</span>
                </div>
            </li>
              <li @click="viphandle('qiandao')">
                <div class="crousel-nav-up">
                    <img src="../../../../public/ykf-img/h5.png" alt="">
                </div>
                <div class="crousel-nav-text">
                    <span>签到</span>
                </div>
            </li>
        </ul>
    </div>
    <!-- 限时 -->
     <div class="limit-time-root">
        <div class="time-root-mid">
           <div class="time-root-mid-up">
                <span class="title">限时抢购 </span><button>8129:89173</button>
                <p class="p">每天10点 限量秒杀</p>
                <ul>
                    <li>
                                             <div><img src="../../../../public/ykf-img/限时.jpg" alt=""></div>

                        <span>￥99.0</span>
                        <p>￥99.0</p>
                    </li>
                        <li>
                                               <div><img src="../../../../public/ykf-img/限时.jpg" alt=""></div>

                        <span>￥99.0</span>
                        <p>￥99.0</p>
                    </li>
                        <li>
                                              <div><img src="../../../../public/ykf-img/限时.jpg" alt=""></div>

                        <span>￥99.0</span>
                        <p>￥99.0</p>
                    </li>
                        <li>
                        <div><img src="../../../../public/ykf-img/限时.jpg" alt=""></div>
                        <span>￥99.0</span>
                        <p>￥99.0</p>
                    </li>
                </ul>
                
           </div>
           <div class="time-root-mid-down">
               <div class="down-left">
                   <p>每日特价</p>
                   <div>9块9疯抢</div>
                   <div>
                       <img src="../../../../public/ykf-img/特价.jpg"  alt="">
                                              <img src="../../../../public/ykf-img/特价.jpg"  alt="">

                   </div>
                   
               </div>
                  <div class="down-right" @click="xinrenhander">
                    <p>新人特惠</p>
                   <div>特惠好物1元起</div>
                   <div>
                                            <img src="../../../../public/ykf-img/特价2.jpg"  alt="">

                                             <img src="../../../../public/ykf-img/特价2.jpg"  alt="">

                   </div>
               </div>
           </div>
        </div>
    </div>
        <!-- 热销 -->
         <div class="onsale">
             <span class="onsale-title">热门榜单</span>
            <ul>
                <li>
                    <div class="onsale-list-title">
                        <span>销量榜</span>
                    </div>
                    <div>
                                               <img src="../../../../public/ykf-img/x1.png"  alt="">

                    </div>
                </li>
                <li>
                    <div class="onsale-list-title">
                        <span>口碑榜</span>
                    </div>
                    <div>
                                                                      <img src="../../../../public/ykf-img/x2.png"  alt="">

                    </div>
                </li>
                <li>
                    <div class="onsale-list-title">
                        <span>热搜榜</span>
                    </div>
                    <div>
                                                                     <img src="../../../../public/ykf-img/x3.png"  alt="">

                    </div>
                </li>
            </ul>
    </div>
    <!-- goods-list -->
    <div class="home-goodslist">
        <ul class="home-goods-nav">
            <li v-for="tab,index in listnav" :key='index' 
           
                @click="handleNav(index)">
                <span  :class="{clicked:curId===index}">
                    {{tab.txt1}}
                </span>
                <span  :class="{clicked:curId===index}">
                    {{tab.txt2}}
                </span>
            </li>
     
        </ul>

    </div>
    <div class="goods-list">
        <component :is="modulex[moduleIndex]" :obj="listnav[moduleIndex].obj"></component>
    </div>
    </div>
</template>

<script>

import Swiper from './Swiper'
import Vue from 'vue';
import { CollapseItem, Popup } from 'vant';
import jinpinlist from './jinpinlist'
import jinkoulist from './jinkoulist'
import youhuilist from './youhuilist'
import xinpinlist from './xinpinlist'

Vue.use(Popup);
export default {
            components:{
                Swiper
                        
            },
            data(){
                return {
                    n:0,
                    show:false,
                    curId:0,
                    moduleIndex:0,
                    modulex:[jinpinlist,jinkoulist,youhuilist,xinpinlist],
                    listnav:[
                        {
                            txt1:'精选',
                            txt2:'为你推荐',
                            obj:{
                                src:'../../../assets/images/good2'
                            }
                        },
                        {
                             txt1:'进口',
                            txt2:'优质进口',
                            obj:{
                                src:'../../../assets/images/good2'
                            }
                        },
                        {
                             txt1:'优惠',
                            txt2:'特惠好物',
                            obj:{
                                src:'../../../assets/images/good2'
                            }
                        },
                        {
                             txt1:'新品',
                            txt2:'精选新品',
                            obj:{
                                src:'../../../assets/images/good2'
                            }
                        }
                    ]

                }
            },
            mounted(){
               if(this.$store.state.n){
                   this.show = false
               }else{
                   this.show = true
               }
            //    console.log('-----',this.$store.state.n)

           
            },
            methods:{
                asd(){
                   this.$store.commit('changeN') 
                },
                showPopUp(){
                    this.show=true;
                },
                handleNav:function(index){
                    console.log(index)
                    this.curId=index
                    this.moduleIndex=index
                },
                viphandle(path){                
                    this.$router.push('/'+path)
                },
                xinrenhander(){
                    this.$router.push('/xinren')

                }
            }
    }
</script>
<style lang="stylus" scoped>
html
    font-size 26.666667vw
</style>
<style lang="stylus" scoped>
.poper
    width .3rem
    height .4rem
    background-color rgba(255, 98, 98, 1)

</style>
<style lang="stylus" scoped>

    .main-root
        background-color: #f7f7f7
        height 100%
        overflow scroll
        padding 0 .1rem
    #home-crousel
        height 1.6rem
        margin-top .1rem
        border-radius .2rem
        background-color #f7f7f7
    .main-crousel-nav
        height .85rem
        background-color #f7f7f7 
        font-size .12rem
        color #666
        ul 
            display flex 
            justify-content space-between
            width 90%
            height 100%
            margin auto
            padding-top .12rem
            li 
                text-align center
                &:nth-child(2) .crousel-nav-up
                    line-height .4rem
                    background-color #28d094
                &:nth-child(3) .crousel-nav-up
                    // line-height .4rem

                    background-color #666ee8
                &:nth-child(4) .crousel-nav-up
                    line-height .4rem

                    background-color #ffc71c
                &:nth-child(5) .crousel-nav-up
                    // line-height .4rem

                    background-color #0099ff
                .crousel-nav-up
                    width .4rem
                    height .4rem
                    background-color #ff6262
                    border-radius .2rem
                    vertical-align middle
                    line-height .35rem
                    text-align center
                    display inline-block
                .crousel-nav-text
                    line-height 1
                    margin-top .08rem

    @import '~@/assets/stylus/border.styl'
    .limit-time-root
        // width 3.40rem
        padding 0 .12rem
        height 3.69rem
        background-color: #fff
        border-radius .1rem
        margin auto 
        .time-root-mid
            // width 3.15rem
            height 100%
            margin auto 
            // background-color skyblue
            .time-root-mid-up
                height 2.03rem
                border_1px(0 0 1px 0,#333)
                padding-top .18rem
                padding-bottom .18rem
                color #999
                .title
                    font-weight normal
                    color #333
                    font-size .18rem
                    line-height 1

                button 
                    background-color rgba(255, 98, 98, 1)
                    border 0
                    border-radius .3rem
                    font-size .12rem
                    color white
                    text-align center
                    line-height 100%
                    height .2rem
                    padding-left .06rem
                    padding-right .06rem
                    vertical-align top 
                    margin-left .1rem
                .p
                    line-height 1
                    margin-top .1rem
                    margin-bottom .13rem
                ul
                    display flex 
                    flex 1
                    justify-content space-between
                    li 
                        width .7rem

                        text-align center
                        span 
                            color #FF6262
                            line-height 1
                            margin-bottom .1rem
                        div img
                            width .65rem
                            height .65rem
    .time-root-mid-down
            display flex
            justify-content space-between
            padding-top .16rem
            img 
                width .65rem
                height .65rem
        .down-left
            width 1.64rem
            p
                font-size .16rem
                line-height 1
                color #333
                padding-left .1rem
            p+div
                color #999
                padding-left .1rem

                line-height 1
                margin-top .1rem
                margin-bottom .13rem
            p+div+div
                display flex
                flex 1
                justify-content space-around
            
        .down-right
            width 1.64rem
            p
                font-size .16rem
                line-height 1
                color #333
                padding-left .1rem

            p+div
                color #999
                line-height 1
                margin-top .1rem
                margin-bottom .13rem
                padding-left .1rem

            p+div+div
                display flex
                justify-content space-around
        .onsale
            // width 3.35rem
            height 2.03rem
            margin auto    
            background-color #fff     
            margin-top  .12rem
            border-radius .1rem
            padding-left .1rem
            .onsale-title
                line-height .23rem
                font-size .18rem
                font-weight 500

                display inline-block
                margin-top .15rem
                margin-bottom .19rem
            ul
                display flex
                justify-content space-around
                font-size .14rem
                color #333
                li
                    width 1rem
                    height 1.25rem
                    border-radius .07rem
                    padding-top .14rem
                    &:first-child
                       background-color rgba(102, 110, 232, 0.0980392156862745)
                    &+li
                        background-color rgba(255, 98, 98, 0.0980392156862745)
                    &+li+li
                        background-color rgba(255, 199, 28, 0.0980392156862745)
                        margin-right .07rem
                    span
                        padding-left .1rem
                    div+div 
                        margin-top .15rem
                        text-align center
                        img
                            height .58rem
    .home-goodslist
        // padding 0 .14rem
        margin-top .12rem
        .home-goods-nav
            height .64rem
            display flex
            li
                flex 1
                // text-align left 
                display flex
                flex-direction column
                

                &:nth-child(2)
                    text-align center
                &:nth-child(3)
                    text-align center
                &:last-child
                    text-align right
                span:first-child
                    // display block
                    text-align center
                    font-size .18rem
                    font-weight bold
                    color #333
                    // margin-bottom .6rem

                    
                span+span
                    text-align center
                    color #999

    .clicked
        color  rgb(102, 110, 232)     !important
    .goods-list
        // padding 0 .18rem
        // height 9.9rem 
 
           
          

                
          

</style>
